// import React, { Component } from 'react'


import React from 'react';
import ReactDOM from 'react-dom';

import axios from 'axios'
// import { NavigationControl, InfoWindow } from 'react-bmapgl';


// 按需导入 加载速度快一些
// import Map from 'react-bmapgl/Map'
// import Marker from 'react-bmapgl/Overlay/Marker'

//引入封装好的NavHeader组件 
import NavHeader from '../../components/NavHeader/NavHeader'



// import './index.scss'
import styles from './index.module.css'

console.log(styles)






{


    /*
//     第一步 在public/index.html  加入 

//  这来需要加入 http:
//  <script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>



//  第二步申请秘钥   RrDpUNP99Bop3xUhGWmPLlgug6yXhRvn


//  第三步 安装 npm install react-bmapgl --save
   
*/



}



//根据地理位置获取地图找房信息 
// - 获取当前定位城市
// - 使用 地址解析器 解析当前城市坐标
// - 调用 centerAndZoom() 方法在地图中展示当前城市，并设置缩放级别为11
// - 在地图中添加比例尺和平移缩放控件

// var map = new BMapGL.Map('container');
// map.centerAndZoom(new BMapGL.Point(116.331398,39.897445), 12);
// //创建地址解析器实例
// var myGeo = new BMapGL.Geocoder();
// // 将地址解析结果显示在地图上，并调整地图视野
// myGeo.getPoint('北京市海淀区上地10街', function(point){
//     if(point){
//         map.centerAndZoom(point, 16);
//         map.addOverlay(new BMapGL.Marker(point, {title: '北京市海淀区上地10街'}))
//     }else{
//         alert('您选择的地址没有解析到结果！');
//     }
// }, '北京市')






// ### 2 创建文本覆盖物

// - 创建Label 示例对象
// - 掉用setStyle() 方法设置样式
// - 在map对象上调用 addOverlay() 方法，讲文本覆盖物添加到地图中



// 创建文本标注对象
// var label = new BMapGL.Label('欢迎使用百度地图JSAPI GL版本', opts);
// // 自定义文本标注样式
// label.setStyle({
// color: 'blue',
// borderRadius: '5px',
// borderColor: '#ccc',
// padding: '10px',
// fontSize: '16px',
// })
// // 把覆盖物添加到地图上
// map.addOverlay(label)


const BMapGL = window.BMapGL


class MapIndex extends React.Component {

    state = {
        position: {
            // lng: 116.402544, lat: 39.928216

            lng: 114.496921, lat: 30.557341

        }
    }
    //    componentDidMount() {
    //判断是否支持 获取本地位置
    //  if (navigator.geolocation) {
    //     var n = navigator.geolocation.getCurrentPosition(function(res){
    //         console.log(res); // 需要的坐标地址就在res中
    //     });
    //  } else {
    //      alert('该浏览器不支持定位');
    //  }

    //    }


    componentDidMount() {
        this.__initMap()





    }


    __initMap() {

        //   1    获取当前定位城市
        var curCity = localStorage.getItem('curCity')
        var valueId=localStorage.getItem('id')
        
        var map = new BMapGL.Map('container');

         this.map=map
        //  2  使用 地址解析器 解析当前城市坐标
        var myGeo = new BMapGL.Geocoder();

        myGeo.getPoint(curCity,   async  (point) => {
            console.log(point)
          

            var latitude=point.lng
            var longitude=point.lat
            if (point) {
                // 3 调用 centerAndZoom() 方法在地图中展示当前城市，并设置缩放级别为11
                map.centerAndZoom(point, 11);



                // map.addOverlay(new BMapGL.Marker(point, { title: curCity + '机场xxx' }))

                // 在地图中添加比例尺和平移缩放控件

                var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
                map.addControl(scaleCtrl);
                var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
                map.addControl(zoomCtrl);
                var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
                map.addControl(cityCtrl);
                map.enableScrollWheelZoom(true); //开启滚轮




                let url=`http://e.ludir.cn:8081/area/map?id=${valueId}`
            //   console.log('----- 封装的后期数据的代码-----')
                this.renderOverlays(valueId)

                // console.log('----------')



            // let result=  axios.get(url).then(res=>{
            //     console.log(res.data.body)

            //         //                 coord:
            //         // latitude: "31.29397421"
            //         // longitude: "121.5361245"
            //         // __proto__: Object
            //         // count: 49
            //         // label: "杨浦"
            //         // value: "AREA|67fad918-f2f8-59df"
            // })


            let result=    await  axios.get(url)
            let resList= result.data.body

              console.log(resList)
              resList.forEach((v,index)=>{
                    // var point=v.coord;
                 var {coord:{latitude,longitude}}=v
                  var count= v.count
                  var  curCity=v.label


                  // 调用创建覆盖物函数
                  this.createMask(map,{longitude,latitude},curCity,count)




              })

            } else {
                alert('您选择的地址没有解析到结果！');
            }
        }, curCity)


    }



 //  设置地图覆盖物 

    createMask(map,point,curCity,count=10) {
          
                
                var opts = {
                    position: new BMapGL.Point(point.longitude, point.latitude), // 指定文本标注所在的地理位置
                    offset: new BMapGL.Size(-50, -28)// 设置文本偏移量
                    // new BMapGL.Size(30, -30) 
                };

                // 创建文本标注对象
                // var label = new BMapGL.Label('hello  react  百度地图api的使用', opts);

                console.log('opts',opts)
                var label = new BMapGL.Label('', opts);
                label.setContent( `
                <div class="${styles.bubble}">
                <p class="${styles.name}">${curCity}  ${count}套</p> 
              </div>
            `)
                // 设置调用setStyle() 方法设置样式
            

                const labelStyle = {
                    cursor: 'pointer',
                    border: '0px solid rgb(255,0,0)',
                    padding: '0px',
                    whiteSpace: 'nowrap',
                    fontSize: '12px',
                    color: 'rbg(255,255,255)',
                    textAlign: 'center'
                }
         

                label.setStyle(labelStyle)

                // 把覆盖物添加到地图上

                console.log('mask')
                //添加点击事情
                label.addEventListener('click',()=>{
                    alert('点击')


                })

                // 清除地图上的覆盖物
                setTimeout(function () {
                    map.clearOverlays()
                }, 0)
                map.addOverlay(label)
                //
               
               
    }



    //添加全局渲染覆盖物以及获取到覆盖物的缩放类型 
    async   renderOverlays(valueId){
        // let url=`http://e.ludir.cn:8081/area/map?id=${valueId}`
        let result=    await  axios.get(url)


        const { nextZoom, type } = this.getTypeAndZoom()

        console.log(nextZoom,type)


    }


    // 调用 getTypeAndZoom 方法获取地图缩放级别，覆盖物类别  实现当前点击的具体是区或者是镇

    // 计算要绘制的覆盖物类型和下一个缩放级别
  // 城区   -> 11 ，范围：>=10 <12
  // 镇   -> 13 ，范围：>=12 <14
  // 小区 -> 15 ，范围：>=14 <16
    //  getTypeAndZoom(map){
     
    //     let nextZoom, type
    //     // const zoom = this.map.getZoom()
    //     var zoom=map.getZoom()
    //     return {
    //         nextZoom,
    //         type
    //     }


    //  }



     getTypeAndZoom(){
     
        let nextZoom, type
        // const zoom = this.map.getZoom()
        var zoom= this.map.getZoom()

     if(zoom>=10&&zoom<12) {
        nextZoom=11;
         type='cricle'
     }else if(zoom>=12&&zoom<14) {
        nextZoom=13;
        type='cricle'
     }else if(zoom>=14&&zoom<16) {
        nextZoom=15;
        type='creact'
     }




        return {
            nextZoom,
            type
        }


     }


    // 这个方法没有太多的逻辑，主要是逻辑判断，然后根据不同条件调用不同渲染的方法
    // createOverlays() {}



    //    className='NavBox'
    render() {
        let { lng, lat } = this.state.position
        return (<div>

            <NavHeader> 地图显示页面</NavHeader>




            {/* <Map center={{ lng: 116.402544, lat: 39.928216 }} zoom="11" className='Map'

                style={{ height: 800 }}
            >
                <Marker position={{ lng, lat }} />
                <NavigationControl />
                <InfoWindow position={{ lng, lat }} text="内容" title="我是地图 出来啊" />
            </Map> */}

            {/* <div id={styles.container}   id='container'></div> */}

            <div id="container" className={styles.container} />

        </div>)



    }
}


export default MapIndex

